import { Breadcrumb } from "antd";
import { ItemType } from "antd/es/breadcrumb/Breadcrumb";
import { useEditorContext } from "../../store/editor-provider";
import { SettingOutlined } from "@ant-design/icons";
import GlobalSettingsPannel from "./global-settings-pannel";
import ComponentSettingsPannel from "./component-settings-pannel";

type Props = {};

const AttributePannel = (props: Props) => {
  const { editor, dispatch } = useEditorContext();
  const { curSelectedWidgetId, widgetList } = editor;
  const hasSelectWidget = Boolean(curSelectedWidgetId);
  const isGlobalSetting = !hasSelectWidget;
  const selectedWidget = widgetList.find((w) => w.id === curSelectedWidgetId);

  const handleLinkToGlobalSettings = () => {
    dispatch({ type: "select", payload: { id: null } });
  };

  const breadcrumbRender = () => {
    const items: ItemType[] = [
      {
        title: (
          <>
            <SettingOutlined style={{ marginRight: 4 }} />
            全局设置
          </>
        ),
        onClick: handleLinkToGlobalSettings
      }
    ];
    hasSelectWidget && items.push({ title: selectedWidget?.name });
    return <Breadcrumb items={items} style={{ marginBottom: 10 }} />;
  };

  const settingsRender = () => {
    return isGlobalSetting ? (
      <GlobalSettingsPannel />
    ) : (
      // editor?.curSelectedWidgetId
      <ComponentSettingsPannel />
    );
  };

  return (
    <section className='attr-pannel'>
      {breadcrumbRender()}
      {settingsRender()}
    </section>
  );
};

export { AttributePannel };
